﻿<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%request.setAttribute("path", request.getContextPath());%>
<!doctype html>
<html class="no-js" lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>购物车-青鸟优选</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="shortcut icon" type="image/x-icon" href="${path}/assets/img/favicon.png">
        <!-- Place favicon.ico in the root directory -->
		<!-- CSS here -->
        <link rel="stylesheet" href="${path}/assets/css/bootstrap.min.css">
        <link rel="icon" href="${path}/jbs/images/ico.ico" type="image/x-icon">
        <link rel="stylesheet" href="${path}/assets/css/animate.min.css">
        <link rel="stylesheet" href="${path}/assets/css/magnific-popup.css">
        <link rel="stylesheet" href="${path}/assets/css/fontawesome-all.min.css">
        <link rel="stylesheet" href="${path}/assets/css/jquery-ui.css">
        <link rel="stylesheet" href="${path}/assets/css/flaticon.css">
        <link rel="stylesheet" href="${path}/assets/css/aos.css">
        <link rel="stylesheet" href="${path}/assets/css/slick.css">
        <link rel="stylesheet" href="${path}/assets/css/default.css">
        <link rel="stylesheet" href="${path}/assets/css/style.css">
        <link rel="stylesheet" href="${path}/assets/css/responsive.css">
    </head>
    <body>

    <!-- preloader -->
    <div id="preloader">
        <div id="loading-center">
            <div class="loader">
                <img src="${path}/assets/img/logo/ico.png" alt="">
            </div>
        </div>
    </div>
    <!-- preloader-end -->

    <!-- header-area -->
    <header class="header-style-two">
        <!-- header-search-area -->
        <div class="header-search-area">
            <div class="container custom-container">
                <div class="row align-items-center">
                    <div class="col-xl-2 col-lg-3 d-none d-lg-block">
                        <div class="logo">
                            <a href="${path}/Index"><img src="${path}/assets/img/logo/logo.png" alt="Logo"></a>
                        </div>
                    </div>
                    <div class="col-xl-10 col-lg-9">
                        <div class="d-block d-sm-flex align-items-center justify-content-end">
                            <div class="header-search-wrap">
                                <form action="#">
                                    <input type="text" placeholder="搜索商品">
                                    <button><i class="flaticon-loupe-1"></i></button>
                                </form>
                            </div>
                            <div class="header-action">
                                <ul>
                                    <c:choose>
                                        <c:when test="${requestScope.userSession==null}">
                                            <li class="header-user" ><a href="${path}/Login" style="color: var(--color-primary);width: 60px;border-radius: 20px">
                                                登录</a></li>
                                            <li class="header-user"><a href="#" style="color: var(--color-primary);width: 60px;border-radius: 20px">
                                                注册</a></li>
                                        </c:when>
                                        <c:otherwise>
                                            <li class="header-user">
                                                <div class="header-cart-wrap">
                                                    <a href="${path}/User"><img src="${requestScope.userSession.pic_link}" alt="" style="width:44px;border-radius: 50px;height: 44px;object-fit: cover"></a>
                                                    <ul class="minicart" style="padding-right: 10px">
                                                        <li class="d-flex align-items-start">
                                                            <div class="cart-img">
                                                                <img src="${requestScope.userSession.pic_link}" alt="" style="width: 90px;height: 90px;border-radius: 90px">
                                                            </div>
                                                            <div class="cart-content" style="margin-top: 15px;padding-right: 15px">
                                                                <h4>${requestScope.userSession.loginname}</h4>
                                                                <div class="cart-price">
                                                                    <span class="new">${requestScope.userSession.userTypeText}</span>
                                                                    <span style="margin: 0">${requestScope.userSession.phone}</span>
                                                                </div>
                                                            </div>
                                                            <div class="del-icon">
                                                                <a onclick="logout()" style="cursor: pointer"><i class="far fa-sign-out-alt"></i></a>
                                                            </div>
                                                        </li>
                                                        <li class="d-flex align-items-start">
                                                            <div class="index-proPicBtns">
                                                                <a href="${path}/User"><button>个人中心</button></a>
                                                                <a href="${path}/Orders"><button>已买到的宝贝</button></a>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                        </c:otherwise>
                                    </c:choose>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- header-search-area-end -->

        <div id="sticky-header" class="menu-area">
            <div class="container custom-container">
                <div class="row">
                    <div class="col-12">
                        <div class="mobile-nav-toggler"><i class="fas fa-bars"></i></div>
                        <!-- Mobile Menu  -->
                        <div class="mobile-menu">
                            <nav class="menu-box">
                                <div class="close-btn"><i class="fas fa-times"></i></div>
                                <div class="nav-logo"><a href="act.jsp"><img src="${path}/assets/img/logo/logo.png" alt="" title=""></a>
                                </div>
                                <div class="menu-outer">
                                    <!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header-->
                                </div>
                                <div class="social-links">
                                    <ul class="clearfix">
                                        <li><a href="#"><span class="fab fa-twitter"></span></a></li>
                                        <li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
                                        <li><a href="#"><span class="fab fa-pinterest-p"></span></a></li>
                                        <li><a href="#"><span class="fab fa-instagram"></span></a></li>
                                        <li><a href="#"><span class="fab fa-youtube"></span></a></li>
                                    </ul>
                                </div>
                            </nav>
                        </div>
                        <div class="menu-backdrop"></div>
                        <!-- End Mobile Menu -->
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- header-area-end -->
        <!-- main-area -->
        <main>

            <!-- breadcrumb-area -->
            <div class="breadcrumb-area breadcrumb-bg-two">
                <div class="container custom-container">
                    <div class="row">
                        <div class="col-12">
                            <div class="breadcrumb-content">
                                <nav aria-label="breadcrumb">
                                    <div>
                                        <i class="fa fa-shopping-cart fa-2x"></i>
                                        <p class="font-weight-bolder fa-2x">购物车</p>
                                    </div>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- breadcrumb-area-end -->

            <!-- cart-area -->
            <div class="cart-area pt-90 pb-90">
                <div class="container">
                    <div>
                        <div class=" d-inline-block" style="width: 950px;margin: 0">
                            <div class="cart-wrapper">
                                <div class="table-responsive">
                                    <table class="table mb-0">
                                        <thead>
                                            <tr>
                                                <th class="product-thumbnail"></th>
                                                <th class="product-name">商品</th>
                                                <th class="product-price">单价</th>
                                                <th class="product-price">属性</th>
                                                <th class="product-quantity">数量</th>
                                                <th class="product-subtotal">小计</th>
                                                <th class="product-delete"></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        <c:forEach items="${requestScope.Buy}" begin="0" end="${fn:length(requestScope.Buy)}" var="i" varStatus="index">
                                            <tr>
                                                <td class="product-thumbnail" style="width: 10%"><a href="${path}/details?id=${i.itemId}"><img src="${i.pic}" alt=""></a></td>
                                                <td class="product-name" style="width: 20%">
                                                    <h4><a href="${path}/details?id=${i.itemId}">${i.fullname}</a></h4>
                                                </td>
                                                <td style="width: 6%">¥${i.singlePrice}</td>
                                                <td class="product-suk" style="width: 12%">${i.suk}</td>
                                                <td class="product-quantity" style="width: 19%">
                                                    <div class="cart--plus--minus flex-row">
                                                        <button class="rounded-btn d-inline-block plusMinusBtn" onclick="cartMinusUpdate1($(this),${i.dataId},'price_${index.index}');"><i class="fa fa-minus"></i></button>
                                                        <input type="text" class="in-num d-inline-block w-25 plusMinusDisplay car_ipt" value="${i.itemNumber}" readonly>
                                                        <button class="rounded-btn d-inline-block plusMinusBtn" onclick="cartAddUpdate1($(this),${i.dataId},'price_${index.index}');"><i class="fa fa-plus"></i></button>
                                                    </div>
                                                </td>
                                                <td style="width: 10%">¥<span id="price_${index.index}">${i.price}</span></td>
                                                <td class="product-delete" width="5%"><a onclick="OpenDivDeleteCart('DeleteCartMessage','fadeBlack',${i.dataId})"><i class="far fa-trash-alt"></i></a></td>
                                            </tr>
                                        </c:forEach>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="shop-cart-bottom">
                                <div class="continue-shopping">
                                    <a class="btn" onclick="window.history.back()" >继续购物</a>
                                </div>
                            </div>
                        </div>
                        <div class="d-inline-block" style="position: sticky;top:3rem;vertical-align: top;width: 21rem">
                            <div class="shop-cart-total">
                                <h3 class="title">总计</h3>
                                <div class="shop-cart-widget">
                                    <form action="#">
                                        <ul>
                                            <li class="sub-total"><span>商品金额</span> <span id="totalPrice" style="text-align: right"></span></li>
                                            <li class="flex-column">
                                                <span>优惠</span>
                                                <div class="shop-check-wrap" style="width:100%">
                                                    <div class="discountRow custom-checkbox">
                                                        <p class="discountTextTitle">会员折扣</p>
                                                        <p class="discountTextContent">敬请期待</p>
                                                    </div>
                                                    <div class="discountRow custom-checkbox">
                                                        <p class="discountTextTitle">店铺折扣</p>
                                                        <p class="discountTextContent">敬请期待</p>

                                                    </div>
                                                </div>
                                            </li>
                                            <li class="cart-total-amount"><span>实付金额</span><span class="amount" id="EndingPrice"></span></li>
                                        </ul>
                                        <a href="${path}/Checkout" class="btn">提交订单</a>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- cart-area-end -->

        </main>
        <!-- main-area-end -->

    <!--Begin 弹出层-加入购物车 Begin-->
    <div id="fadeBlack" class="black_overlay">
    </div>
    <div id="DeleteCartMessage" class="white_content">
        <a onclick="CloseDiv('DeleteCartMessage','fadeBlack')"><i class="simple-icon-close" style="font-size: 20px;font-weight: bolder;position: absolute;top:20px;left: 40px"></i></a>
        <div class="white_d">
            <div class="notice_c">
                <table border="0" align="center" style="width: 50%" cellspacing="0" cellpadding="0">
                    <tr valign="top" style="text-align: center;height: 60px">
                        <td>
                            <i class="fa fa-check-circle" style="color: var(--color-primary);font-size: 30px;vertical-align: center"></i>
                        </td>
                        <td>
                            <span style="color:#3e3e3e; font-size:18px; font-weight:bold;vertical-align: center">确认要从购物车删除这个商品吗？</span><br />
                        </td>
                    </tr>
                    <tr height="50" valign="bottom" class="btnHoverText">
                        <td colspan="2"><a onclick="CloseDiv('DeleteCartMessage','fadeBlack')" class="button_rc float-left">取消删除</a><a href="#" class="button_r float-right" id="confirmButton">确认删除</a></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <!--End 弹出层-加入购物车 End-->
    <!-- footer-area -->
    <footer>
        <div class="copyright-wrap">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="copyright-text">
                            <p>Copyright &copy 2006-2020 武汉北启至优文化科技有限公司 版权所有 All Rights Reserved.</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="payment-accepted text-center text-md-right">
                            <img src="${path}/assets/img/images/payment_card.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- footer-area-end -->
		<!-- JS here -->
        <script src="${path}/assets/js/vendor/jquery-3.6.0.min.js"></script>
        <script src="${path}/assets/js/bootstrap.min.js"></script>
        <script src="${path}/assets/js/isotope.pkgd.min.js"></script>
        <script src="${path}/assets/js/imagesloaded.pkgd.min.js"></script>
        <script src="${path}/assets/js/jquery.magnific-popup.min.js"></script>
        <script src="${path}/assets/s/jquery.countdown.min.js"></script>
        <script src="${path}/assets/js/jquery-ui.min.js"></script>
        <script src="${path}/assets/js/slick.min.js"></script>
        <script src="${path}/assets/js/ajax-form.js"></script>
        <script src="${path}/assets/js/wow.min.js"></script>
        <script src="${path}/assets/js/aos.js"></script>
        <script src="${path}/assets/js/plugins.js"></script>
        <script src="${path}/assets/js/main.js"></script>
    <script src="${path}/assets/js/shade.js"></script>
    <script>
        window.onload=function(){
            checkPriceAll();
        }
        function checkPriceAll(){
            var set=jQuery("*[id^='price_']");
            var finalPrice= document.getElementById("totalPrice")
            var endingPrice = document.getElementById("EndingPrice")
            var total =parseFloat(parseFloat("0").toFixed(2));
            finalPrice.innerHTML='计算中...';
            set.each(function (index,item){
                    total=total+parseFloat(parseFloat(item.textContent).toFixed(2));
                }
            )
            finalPrice.innerHTML='¥'+total.toFixed(2);
            endingPrice.innerHTML='¥'+total.toFixed(2);
        }
        function cartAddUpdate1(jia,dataId,priceElement) {
            var price = document.getElementById(priceElement);
            var c = jia.parent().find(".car_ipt").val();
            c = parseInt(c) + 1;
            jQuery.ajax({
                url: "${path}/CartPriceAjax",
                type:"post",
                data:{"dataId":dataId,"newAmount":c},
                dataType:"json",
                beforeStart:function(){},
                success:function(result){
                    jia.parent().find(".car_ipt").val(c);
                    price.innerHTML=result;
                },complete:function (){
                    checkPriceAll()
                }
            })
        }
        function cartMinusUpdate1(jia,dataId,priceElement) {
            var price = document.getElementById(priceElement);
            var c = jia.parent().find(".car_ipt").val();
            c = parseInt(c) - 1;
            if(parseInt(c)<parseInt("1")){
                c=1;
                return;
            }
            jQuery.ajax({
                url: "${path}/CartPriceAjax",
                type:"post",
                data:{"dataId":dataId,"newAmount":c},
                dataType:"json",
                beforeStart:function(){},
                success:function(result){
                    jia.parent().find(".car_ipt").val(c);
                    price.innerHTML=result;
                },complete:function (){
                    checkPriceAll()
                }
            })
        }
    </script>
    </body>
</html>
